<?php
use yii\helpers\Url;
use yii\helpers\Html;
use yii\bootstrap\Modal;
use kartik\grid\GridView;
use johnitvn\ajaxcrud\CrudAsset; 
use johnitvn\ajaxcrud\BulkButtonWidget;
use yii\web\View;

/* @var $this yii\web\View */
/* @var $searchModel backend\models\TaozhuangSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Taozhuangs');
$this->params['breadcrumbs'][] = $this->title;

?>
<style type="text/css">
	/**{
		color: #fff;
	}*/
	.taozhuang-index{
		position:absolute;
		left:0px;
		width:100%;
		height:100%;
		padding:0 10px;
		padding-top: 10px;
		background-color: #333;
		/*overflow-y:auto; */
		overflow-x:auto;
	}
	.taozhuang-index span{
		color: #fff;
	}
	.btn-success{
		background-color: #4caf50!important;
    	color: rgba(255,255,255,.84)!important;
	}
	.main_img{
		width: 900px;
		height: 700px;
		border: 1px solid #fff;
	}
	/*.row{
		padding:0 10px;
	}*/
	input[type="range"]{
		width: 500px;
	}
	label{
		color: #fff;
	}
	.left{
		float: left;
		margin-right: 10px;
	}
	.table{
		background: #fff;
		border:none;
	}
	.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
	    border: none;
	}
	td{
		width: 100px;
		color: #000;
	}
	td.img_name{
		width: 200px;
	}
	td.img_name2{
		width: 400px;
	}
	.btn-default{
		background-color: #fff!important;
	}
	p{
		margin:0;
	}
	#coordinateX,#coordinateY{
		width: 80px;
	}
	tbody{
		display: block;
		height: 180px;
		overflow-y: auto; 
		width: 100%;
		border:none;
	}
	tbody>tr{
		border-bottom: 1px solid #000;
	}
	thead>tr{
		display: block;
		width: 100%;
		border-bottom: 1px solid #000;
	}
	.modal div,.modal p{
		color: #000;
	}
</style>
<div class="taozhuang-index">
	<!-- 顶部按钮 -->
   <div class="top_button">
   		<button class="btn btn-danger">日志开关</button>
   		<button class="btn btn-success">(生成/查看)所有大图</button>
   		<button class="btn btn-success">(重新生成)VR xml文件</button>
   		<span>当前选择:[]</span>
   </div>
   <!-- 中间布局 -->
   <div class="row">
   	<div class="left" style="width: 900px;height: 100%;margin-left: 10px;">
	   	<form class="form-inline">
		   	<div class="form-group">
		    <label>10%</label>
		    <input type="range" name="slide" class="form-control" onchange="zoom_slide(this);" id="slider" min="10" max="100" step="1" value="30">
		    <label>100%</label>&nbsp;&nbsp;<span id="zoom_val">当前缩放比例30%</span>
		  </div>
		</form>
		<div class="main_img"></div>
   	</div>
   	<div class="left" style="width: 950px;height: 100%;">
   		<div class="left_button left" style="width: 400px;">
	   		<p>VR上传每层的绑定图片(默认显示)</p>
   			<button class="btn btn-default btn-xs">刷新</button>
	   		<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#add_img">添加</button>
	   		<button class="btn btn-default btn-xs">插入</button>
	   		<button class="btn btn-default btn-xs">删除</button>
	   		<button class="btn btn-default btn-xs">替换</button>
	   		<table class="table table-bordered">
	   			<thead>
	   				<tr>
		   				<td>图片ID</td>
		   				<td>层数</td>
		   				<td class="img_name">名称</td>
		   			</tr>
	   			</thead>
	   			<tbody>
	   			</tbody>
	   		</table>
   		</div>
		<div class="right_button left" style="width: 500px;">
   			<p>VR鼠标点击选择切换点</p>
   			<button class="btn btn-default btn-xs">刷新</button>
	   		<button class="btn btn-default btn-xs">添加</button>
	   		<button class="btn btn-default btn-xs">删除</button>
	   		<span>位置X <input type="number" name="coordinateX" id="coordinateX"></span>
	   		<span>位置Y <input type="number" name="coordinateY" id="coordinateY"></span>
	   		<div>
	   			<button class="btn btn-default btn-xs">添加跳转VR</button>
	   			<button class="btn btn-default btn-xs">修改跳转VR</button>
	   			<input type="text" name="">
	   		</div>
	   		<table class="table table-bordered table-condensed">
	   			<thead>
	   				<tr>
		   				<td>层数</td>
		   				<td>X</td>
		   				<td>Y</td>
		   				<td>跳转VR</td>
		   				<td class="img_name">跳转图片</td>
		   			</tr>
	   			</thead>
	   			<tbody>
	   				
	   			</tbody>
	   		</table>
   		</div>
   		<div class="footer_button left"> 
   			<p>每层可以替换的图片</p>
   			<button class="btn btn-default btn-xs">刷新</button>
	   		<button class="btn btn-default btn-xs">添加</button>
	   		<button class="btn btn-default btn-xs">删除</button>
	   		<button class="btn btn-default btn-xs">设默认</button>
	   		<span>选择/修改对应单品：<input type="text"></span>
	   		<button class="btn btn-default btn-xs">修改</button>
	   		<button class="btn btn-default btn-xs">选择</button>
	   		<table class="table table-bordered table-condensed">
	   			<thead>
		   			<tr>
		   				<td>图片ID</td>
		   				<td>排序</td>
		   				<td>名称</td>
		   				<td class="img_name2">对应单品</td>
		   			</tr>
	   			</thead>
	   			<tbody>
	   				
	   			</tbody>
	   		</table>
   		</div>
   	</div>
   </div>
</div>

<div class="modal fade bs-example-modal-lg" tabindex="-1" id="add_img" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document" style="width: 1400px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加图片</h4>
      </div>
      <div class="modal-body">
      <?= $this->render('img_edit', [
        'model' => $model,
     ]) ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
	//缩放比例事件
	function zoom_slide(e){
		document.getElementById("zoom_val").innerText="当前缩放比例"+e.value+"%";
	}
	// 打开模态框
	function open_model(){
		$.ajax({
			url: '',
			type: 'get',
			dataType: 'json',
			data: {param1: '+create.php'},
			success:function() {
				console.log("success");
			},
			error:function() {
				console.log("error");
			}
		});
		
	}
</script>